<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" :rules="fieldRules" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <span class="tool-bar">
      <!-- 主题切换 -->
      <!-- <theme-picker style="float:right;" class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker> -->
      <!-- 语言切换 -->
      <!-- <lang-selector class="lang-selector"></lang-selector>    -->
    </span>
      <h2 class="title" style="padding-left:22px;">制药加工处理过程关键点源环境释放量评估程序</h2>
      <el-form-item prop="account">
        <el-input v-model="loginForm.account" type="text" auto-complete="off" placeholder="账号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" />
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:30%;" @click.native.prevent="guestLogin">游客登录</el-button>
        <el-button type="primary" style="width:30%;" :loading="loading" @click.native.prevent="showRegister">注 册</el-button>
        <el-button type="primary" style="width:30%;" :loading="loading" @click.native.prevent="login">登 录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="注 册" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" size="size"
               label-position="right">
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="dataForm.username" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="姓名" prop="nickname">
              <el-input v-model="dataForm.nickname" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="确认密码" prop="repeatpassword">
              <el-input v-model="dataForm.repeatpassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="dataForm.email" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="公司" prop="company">
              <el-input v-model="dataForm.company" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: center; height:10%">
      <el-button icon="el-icon-circle-close" @click="cance">取消</el-button>
      <el-button type="primary" icon="el-icon-circle-check" @click="register">确认</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cookies from 'js-cookie'
// import ThemePicker from "@/components/ThemePicker"
// import LangSelector from "@/components/LangSelector"
export default {
  name: 'Login',
  components: {
    // ThemePicker,
    // LangSelector
  },
  data() {
    let reg = /^[A-Za-z0-9]{6,15}$/;
    let passreg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/;
    var validateInput = (rule, value, callback) => {

      if (!reg.test(value)) {
        callback(new Error('用户名只能包括数字字母的组合，长度为6-15位'))
      }
      return callback()
    };
    var passwordInput = (rule, value, callback) => {
      if (!passreg.test(value)) {
        callback(new Error('密码必须由字母、数字组成，区分大小写，长度为8-18位'))
      } else {
        callback()
      }
    };
    var repeatpasswordInput = (rule, value, callback) => {
      if (value !== this.dataForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    };
    var checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
      if (regEmail.test(value)) {
        return callback()
        // 合法的邮箱
      }
      callback(new Error('请输入合法的邮箱！！'))

    };
    var checkMobile = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return callback()
        // 合法的手机号
      }
      callback(new Error('请输入合法的手机号！！'))
    };

    return {
      loading: false,
      dialogVisible: false,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        src: ''
      },
      columns: [{
        prop: "id",
        label: "ID",
        minWidth: 40,
        hidden: true
      },
        {
          prop: "username",
          label: "用户名",
          minWidth: 50
        },
        {
          prop: "nickname",
          label: "姓名",
          minWidth: 50
        },
        {
          prop: "password",
          label: "密码",
          minWidth: 100
        },
        {
          prop: "repeatpassword",
          label: "确认密码",
          minWidth: 100
        },
        {
          prop: "phone",
          label: "手机",
          minWidth: 100
        },
        {
          prop: "email",
          label: "邮箱",
          minWidth: 100
        },
        {
          prop: "company",
          label: "公司",
          minWidth: 100
        },
      ],
      fieldRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
        // ,
        // captcha: [
        //   { required: true, message: '请输入验证码', trigger: 'blur' }
        // ]
      },
      checked: true,
      dataFormRules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
          {
            validator: validateInput,
            trigger: 'blur',
          },
        ],
        nickname: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }, ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
          {
            validator: passwordInput,
            trigger: 'blur'
          }
        ],
        repeatpassword: [{
          required: true,
          message: '请确认密码',
          trigger: 'blur'
        },
          {
            validator: repeatpasswordInput,
            trigger: 'blur'
          }
        ],
        email: [{
          required: true,
          type: 'email',
          message: '请输入正确邮箱',
          trigger: 'blur'
        },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        mobile: [{
          required: true,
          message: '请输入合法手机号码',
          trigger: 'blur'
        }

        ],
        company: [{
          required: true,
          message: '请输入公司',
          trigger: 'blur'
        }],
      },
      dataForm: {
        id: '',
        name: '',
        nickname: '',
        password: '',
        repeatpassword: '',
        mobile: '',
        email: '',
        company: '',
      },
    }
  },
  mounted() {
  },
  methods: {
    login() {
      this.loading = true
      // let userInfo = {account:this.loginForm.account, password:this.loginForm.password, captcha:this.loginForm.captcha}
      const userInfo = { account: this.loginForm.account, password: this.loginForm.password }
      this.$api.login.login(userInfo).then((res) => {
        if (res.msg != null) {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        } else {
          Cookies.set('token', res.data.token) // 放置token到Cookie
          sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
          sessionStorage.setItem('nickname', res.data.nickname) // 保存用户昵称到本地会话
          this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
          this.$router.push('/home') // 登录成功，跳转到主页
        }
        this.loading = false
      }).catch((res) => {
        this.$message({
          message: res.message,
          type: 'error'
        })
      })
    },
    showRegister() {
      this.dialogVisible=true;
    },
    cance() {
      this.dialogVisible=false;
    },
    register: function() {
      this.$refs.dataForm.validate(async valid => {
        if(valid) {
          let params = Object.assign({}, this.dataForm)
          this.$api.user.add(params).then((res) => {
            this.editLoading = false;
            if(res.code == 200) {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.$refs['dataForm'].resetFields()
            }else{
              this.$message({
                message: '注册失败' + res.msg,
                type: 'error'
              })
              this.editLoading = false
            }
          })
        }
      })
    },
    guestLogin(){
      this.loading = true
      // let userInfo = {account:this.loginForm.account, password:this.loginForm.password, captcha:this.loginForm.captcha}
      const userInfo = { account: 'guest', password: '123456' }
      this.$api.login.login(userInfo).then((res) => {
        if (res.msg != null) {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        } else {
          Cookies.set('token', res.data.token) // 放置token到Cookie 除了登陆之外的
          sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
          sessionStorage.setItem('nickname', res.data.nickname) // 保存用户昵称到本地会话
          this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
          this.$router.push('/home') // 登录成功，跳转到数据库首页
        }
        this.loading = false
      }).catch((res) => {
        this.$message({
          message: res.message,
          type: 'error'
        })
      })
    },
    refreshCaptcha: function() {
      this.loginForm.src = this.global.baseUrl + '/captcha.jpg?t=' + new Date().getTime()
    },
    reset() {
      this.$refs.loginForm.resetFields()
    },
    // 切换主题
    onThemeChange: function(themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    }
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor
    })
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}
</style>
